<template>
    <div>
        <x-header :left-options="{backText: ''}">个人账单</x-header>
        <tab>
            <tab-item selected @on-item-click="handler(111)">活动类型统计</tab-item>
            <tab-item @on-item-click="handler(222)">账单统计</tab-item>
            <tab-item @on-item-click="handler(333)">走势分析</tab-item>
        </tab>
        <div id="main" style="width: 100%;height:400px;" ref="main"></div>
    </div>
</template>

<script>
    import {XHeader, Spinner, Divider, Tab, TabItem} from 'vux'
    import request from 'superagent'
    import echarts from 'echarts'

    export default {
        data() {
            return {
                myChart: '',
                pieData: [],
                nameArr: [],
                barData: [],
                lineData: []
            }
        },
        created: function () {
            this.$nextTick(function () {
                this.initPieChart()
            })
        },
        methods: {
            initPieChart(){
                request.get('/wx/bill/pieChartData')
                    .end((err, res) => {
                        console.log(res);
                        if (res.ok) {
                            this.pieData = JSON.parse(res.text).data;
                            for (let obj of this.pieData) {
                                this.nameArr.push(obj.name);
                            }
                            this.myChart = echarts.init(document.getElementById('main'));
                            this.myChart.showLoading();
                            setTimeout(() => {
                                this.myChart.hideLoading();
                            }, 1000);
                            this.myChart.setOption({
                                title: {
                                    text: '',
                                    subtext: '',
                                    x: 'center'
                                },
                                tooltip: {
                                    trigger: 'item',
                                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                                },
                                legend: {
                                    orient: 'vertical',
                                    left: 'left',
                                    data: this.nameArr
                                },
                                series: [
                                    {
                                        name: '类型统计',
                                        type: 'pie',
                                        roseType: 'angle',
                                        radius: '55%',
                                        center: ['50%', '60%'],
                                        data: this.pieData,
                                        itemStyle: {
                                            emphasis: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            },
                                            normal: {
                                                // 阴影的大小
                                                shadowBlur: 200,
                                                // 阴影水平方向上的偏移
                                                shadowOffsetX: 0,
                                                // 阴影垂直方向上的偏移
                                                shadowOffsetY: 0,
                                                // 阴影颜色
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            }
                                        }
                                    }
                                ]
                            });
                        } else {
                            console.log('请求数据失败');
                        }
                    });
            },
            initBarChart(){
                request.get('/wx/bill/barChartData')
                    .end((err, res) => {
                        console.log(res);
                        if (res.ok) {
                            this.barData = JSON.parse(res.text).data;
                            let option = {
                                title: {
                                    text: '',
                                    subtext: '',
                                    x: 'center'
                                },
                                color: ['#3398DB'],
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                    }
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                xAxis: [
                                    {
                                        name: '类型',
                                        type: 'category',
                                        data: this.barData.names,
                                    }
                                ],
                                yAxis: [
                                    {
                                        type: 'value'
                                    }
                                ],
                                series: [
                                    {
                                        name: '账单数据',
                                        type: 'bar',
                                        barWidth: '60%',
                                        data: this.barData.values
                                    }
                                ],
                            };
                            //this.myChart.hideLoading();
                            this.myChart = echarts.init(document.getElementById('main'));
                            this.myChart.showLoading();
                            setTimeout(() => {
                                this.myChart.hideLoading();
                            }, 1000);
                            this.myChart.setOption(option);
                        } else {
                            console.log('请求数据失败');
                        }
                    });
            },
            initLineChart() {
                request.get('/wx/bill/lineChartData')
                    .end((err, res) => {
                        console.log(res);
                        if (res.ok) {
                            this.lineData = JSON.parse(res.text).data;
                            let option = {
                                title: {
                                    text: ''
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    data: ['交友聚会', '音乐戏剧', '体育运动', '户外旅行', '讲座公益', '其他']
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                xAxis: [
                                    {
                                        type: 'category',
                                        boundaryGap: false,
                                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                                    }
                                ],
                                yAxis: [
                                    {
                                        type: 'value'
                                    }
                                ],
                                series: [
                                    {
                                        name: '交友聚会',
                                        type: 'line',
                                        stack: '总量',
                                        areaStyle: {normal: {}},
                                        data: [0, 0, 1, 2, 3, 0, 210]
                                    },
                                    {
                                        name: '音乐戏剧',
                                        type: 'line',
                                        stack: '总量',
                                        areaStyle: {normal: {}},
                                        data: [220, 182, 191, 234, 290, 330, 310]
                                    },
                                    {
                                        name: '体育运动',
                                        type: 'line',
                                        stack: '总量',
                                        areaStyle: {normal: {}},
                                        data: [150, 232, 201, 154, 190, 330, 410]
                                    },
                                    {
                                        name: '户外旅行',
                                        type: 'line',
                                        stack: '总量',
                                        areaStyle: {normal: {}},
                                        data: [320, 332, 301, 334, 390, 330, 320]
                                    },
                                    {
                                        name: '讲座公益',
                                        type: 'line',
                                        stack: '总量',
                                        label: {
                                            normal: {
                                                show: true,
                                                position: 'top'
                                            }
                                        },
                                        areaStyle: {normal: {}},
                                        data: [820, 932, 901, 934, 1290, 1330, 1320]
                                    },
                                    {
                                        name: '其他',
                                        type: 'line',
                                        stack: '总量',
                                        label: {
                                            normal: {
                                                show: true,
                                                position: 'top'
                                            }
                                        },
                                        areaStyle: {normal: {}},
                                        data: [12, 32, 401, 934, 190, 130, 320]
                                    }
                                ]
                            };
                            let data = [];
                            for (let obj of this.lineData) {
                                obj.areaStyle = {normal: {}};
                                data.push(obj)
                            }
                            option.series = data;
                            data = [];
                            for (let obj of this.lineData) {
                                data.push(obj.name)
                            }
                            option.legend.data = data;
                            //this.myChart.hideLoading();
                            this.myChart = echarts.init(document.getElementById('main'));
                            this.myChart.showLoading();
                            setTimeout(() => {
                                this.myChart.hideLoading();
                            }, 1000);
                            this.myChart.setOption(option);
                        } else {
                            console.log('请求数据失败');
                        }
                    });
                //this.myChart.hideLoading();
                this.myChart = echarts.init(document.getElementById('main'));
                this.myChart.setOption(option);
            },
            handler(index) {
                if (index == 111) {
                    this.$nextTick(function () {
                        this.initPieChart()
                    })
                } else if (index == 222) {
                    this.$nextTick(function () {
                        this.initBarChart()
                    })
                } else {
                    this.$nextTick(function () {
                        this.initLineChart()
                    })
                }
            },
        },
        components: {
            XHeader,
            Divider,
            Spinner,
            Tab,
            TabItem
        }
    }
</script>

<style lang="less" scoped>
    .box {
        padding: 15px;
    }

    .active-6-1 {
        color: rgb(252, 55, 140) !important;
        border-color: rgb(252, 55, 140) !important;
    }

    .active-6-2 {
        color: #04be02 !important;
        border-color: #04be02 !important;
    }

    .active-6-3 {
        color: rgb(55, 174, 252) !important;
        border-color: rgb(55, 174, 252) !important;
    }

    .tab-swiper {
        background-color: #fff;
        height: 100px;
    }
</style>